<template>
  <div class="nav-bar-container">
    <van-nav-bar
      :left-text="title"
      left-arrow
      @click-left="onClickLeft"
      v-if="title"
    />
  </div>
</template>

<script>
import { NavBar } from 'vant';
export default {
  name: 'NavBar',
  components: {
    [NavBar.name]: NavBar
  },
  computed: {
    title() {
      return this.$route.meta.title || '';
    }
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    }
  }
};
</script>

<style lang="scss" scoped>
.nav-bar-container {
  flex-shrink: 0;

  ::v-deep .van-nav-bar {
    .van-icon {
      position: relative;
      top: 1px;
      color: var(--color-black);
    }
    .van-nav-bar__text {
      color: var(--color-black);
      font-size: 0.453333rem;
    }
  }
}
</style>